<script setup>
// setup 是让我们的单页面应用使用组合式API的方法
// 在该 script 中使用组件的时候你只需要导入无需注册

import { ref, reactive } from 'vue';
/*
  reactive: 用在创建复杂的数据的时候使用，一般是用在引用类型的数据上
  使用 reactive 不需要在 .value 了

  平时使用的时候需要注意：基本类型数据使用 ref 引用数据使用 reactive
*/
let state = reactive({
  count: 100
})

let arr = reactive(['A', 'B', 'C'])


function addCount () {
  // 在组合式 API 中不能使用 this,this指的是 undefined
  // console.log(this);
  state.count++

  arr.push(state.count)
}

</script>

<template>
  <div>
    <h1>{{ state.count }}</h1>

    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>

    <button @click="addCount">点击修改 count</button>
  </div>
</template>

